<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <div>
            <!-- v-model: 是用于双向数据绑定用的，可以将输入框中的内容和 name 进行绑定 -->
            <input type="text" v-model="name" placeholder="请输入用户名">

            <button @click="addUser">提交</button>
        </div>

        <ul>
            <!-- index 是我们的索引值，尽量不要将 index 设置为 key,没有唯一值可以使用的时候可以使用 index 代替 -->
            <li v-for="(item,index) in userList" :key="item"> <input type="checkbox"> {{item}} </li>
        </ul>
        <!-- 
            v-for 使用的时候一定要加一个 key,而且该 key 属性还要是一个唯一的值
            因为 vue 使用的是虚拟 DOM。当我们在前面添加一个内容的时候，会在虚拟 DOM 的
            前面添加该内容，但是渲染成真实 DOM 后，原来的标签位置是不会变的，只会在最后
            的位置新增一个新的标签，导致我们的内容真实 DOM 位置混乱。如果要解决这个问题
            我们可以使用 key 属性给虚拟 DOM 和真实 DOM 进行关联绑定


         -->
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                name: '',
                userList: ['张三', '李四']
            }
        },
        methods: {
            addUser() {
                console.log('添加', this.name);
                // 将内容添加到前面，但实际添加的标签在后面，元素显示的位置发生了变化
                this.userList.unshift(this.name)

                this.name = ''
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>